<template>
    <div class="detail-section">
        <div class="header">
            <h3>{{ title }}</h3>
        </div>
        <div class="content">   
            <slot>
                默认内容
            </slot>
        </div>
        <div class="footer" v-if="moreText">
            <span>{{ moreText }}</span>
            <van-icon name="arrow" />
        </div>
    </div>
</template>

<script setup>
defineProps({
    title:{
        type:String,
        default:"默认标题"
    },
    moreText:{
        type:String,
        default:""
    }
})
</script>


<style lang='less' scoped>
.detail-section {
    border-top: 6px solid #f3f3f3;
    padding: 10px;
    .header {
        line-height: 42px;
        border-bottom: 2px solid #f4f4f4;
    }
    .content {
        margin: 8px 0;
    }
    .footer {
        color: var(--primary-color);
        height: 42px;
        display: flex;
        justify-content: right;
        align-items: center;
    }
}
</style>